.banner-bottom {
  margin-top: 14px;
  margin-bottom: 24px;

  .container {
    width: 1226px;
    margin: 0 auto;
    position: relative;
    display: flex;

    .home-channel-list {
      width: 234px;
      height: 170px;
      background-color: #5f5750;
      position: relative;

      ul {
        display: grid;
        grid-template: repeat(2, 50%)/repeat(3, 33.3%);
        position: absolute;
        inset: 3px;
        height: auto;
        width: auto;
        overflow: hidden;

        li {
          opacity: .7;
          position: relative;

          &:hover {
            opacity: 1;
          }

          &::before {
            content: '';
            height: 70px;
            width: 1px;
            background-color: #665e57;
            position: absolute;
            left: -1px;
            top: 6px;
          }

          &::after {
            content: '';
            height: 1px;
            width: 64px;
            background-color: #665e57;
            position: absolute;
            left: 6px;
            top: -1px;
          }

          a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;

            img {
              display: block;
              height: 24px;
              width: 24px;
              margin-top: 18px;
            }

            span {
              display: block;
              font-size: 12px;
              line-height: 20px;
              margin-top: 5px;
            }
          }
        }
      }
    }

    .right-ad-list {
      margin-left: 14px;

      ul {
        display: flex;

        li {
          transition: box-shadow .2s linear;

          &:hover {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
          }

          a {
            display: block;
            height: fit-content;
            width: fit-content;

            img {
              display: block;
              height: 170px;
              width: 316px;
              object-fit: cover;
            }
          }

          &:nth-child(2) {
            margin: 0 15px;
          }
        }
      }

    }
  }
}